﻿<html>
<head>
    <title>Layout - jQuery MiniUI 3.0 Documentation</title>    

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="jquery,datagrid,grid,表格控件,ajax,web开发,java开发,.net开发,tree,table,treegrid" />
    <meta name="description" content="jQuery MiniUI - 专业WebUI控件库。jQuery MiniUI是使用Javascript实现的前端Ajax组件库，支持所有浏览器，可以跨平台开发，如Java、.Net、PHP等。" />

    <link href="css/common.css" rel="stylesheet" type="text/css" />
    <script src="core.js" type="text/javascript"></script>
    
        

    
</head>
<body>
    <h3>mini.Layout</h3>
    
    <p>布局管理器。</p>

    <h4>Extend</h4>
    <p> <a class="extendlink" href="control.html">mini.Control</a></p>    
    <h4>Usage</h4>
<pre class="code"><span style="color:blue">&lt;</span><span style="color:maroon">div </span><span style="color:red">id</span><span style="color:blue">="layout1" </span><span style="color:red">class</span><span style="color:blue">="mini-layout" </span><span style="color:red">style</span><span style="color:blue">="</span><span style="color:red">width</span><span style="color:blue">:600px;</span><span style="color:red">height</span><span style="color:blue">:400px;"&gt;
    &lt;</span><span style="color:maroon">div </span><span style="color:red">title</span><span style="color:blue">="north" </span><span style="color:red">region</span><span style="color:blue">="north" </span><span style="color:red">height</span><span style="color:blue">="80" &gt;
        </span>north
    <span style="color:blue">&lt;/</span><span style="color:maroon">div</span><span style="color:blue">&gt;
    &lt;</span><span style="color:maroon">div </span><span style="color:red">title</span><span style="color:blue">="south" </span><span style="color:red">region</span><span style="color:blue">="south" </span><span style="color:red">showSplit</span><span style="color:blue">="false" </span><span style="color:red">showHeader</span><span style="color:blue">="true" </span><span style="color:red">height</span><span style="color:blue">="80"  &gt;
        </span>south
    <span style="color:blue">&lt;/</span><span style="color:maroon">div</span><span style="color:blue">&gt;
    &lt;</span><span style="color:maroon">div </span><span style="color:red">title</span><span style="color:blue">="west" </span><span style="color:red">region</span><span style="color:blue">="west" </span><span style="color:red">width</span><span style="color:blue">="200" &gt;
        </span>west
    <span style="color:blue">&lt;/</span><span style="color:maroon">div</span><span style="color:blue">&gt;
    &lt;</span><span style="color:maroon">div </span><span style="color:red">title</span><span style="color:blue">="east" </span><span style="color:red">region</span><span style="color:blue">="east"  </span><span style="color:red">showCloseButton</span><span style="color:blue">="true" &gt;
        </span>east
    <span style="color:blue">&lt;/</span><span style="color:maroon">div</span><span style="color:blue">&gt;
    &lt;</span><span style="color:maroon">div </span><span style="color:red">title</span><span style="color:blue">="center" </span><span style="color:red">region</span><span style="color:blue">="center" &gt;
        </span>center
    <span style="color:blue">&lt;/</span><span style="color:maroon">div</span><span style="color:blue">&gt;
&lt;/</span><span style="color:maroon">div</span><span style="color:blue">&gt;
</span></pre>

    <h4>Screenshots</h4>
    <img src="images/layout.gif" />

    <h4>Examples</h4>
    <a class="demo" href="../../demo/layout/layout.html" target="_blank">Layout</a>


    <h4>Properties</h4>
    <table>
        <tr><th>Name</th><th>Type</th><th>Description</th><th>Default</th><th><a href="setsupport.html" target="_blank" style="padding-left:5px;padding-right:5px;"> Set? </a></th><th><a href="getsupport.html" target="_blank" style="padding-left:5px;padding-right:5px;"> Get? </a></th><th><a href="tagsupport.html" target="_blank" style="padding-left:5px;padding-right:5px;"> Tag? </a></th></tr>
        <tr>
            <td>splitSize</td>
            <td>Number</td>
            <td>分割条尺寸</td>
            <td>6</td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>        
    </table>

    <h4>Methods</h4>
    <table>
        <tr><th>Name</th><th>Parameter</th><th>Description</th><th>Return</th></tr>

        <tr>
            <td>setRegions ( Array )</td>
            <td></td>
            <td>设置<a href="#region">Regoin</a>对象数组</td>
            <td></td>
        </tr>
        <tr>
            <td>addRegion ( Object [, index] )</td>
            <td>
            Object：<a href="#region">Regoin</a>对象。<br />
            index：Number。索引号。<br />
            </td>
            <td>增加region。<br />
            </td>
            <td></td>
        </tr>
        <tr>
            <td>removeRegion ( String )</td>
            <td></td>
            <td>删除region面板。</td>
            <td></td>
        </tr>
        <tr>
            <td>updateRegion ( String, options )</td>
            <td></td>
            <td>更新region面板</td>
            <td></td>
        </tr>
        <tr>
            <td>expandRegion ( String )</td>
            <td></td>
            <td>展开regoin对象。</td>
            <td></td>
        </tr>
        <tr>
            <td>collapseRegion ( String )</td>
            <td></td>
            <td>收缩regoin对象。</td>
            <td></td>
        </tr>
        <tr>
            <td>showRegion ( String )</td>
            <td></td>
            <td>显示regoin对象。</td>
            <td></td>
        </tr>
        <tr>
            <td>hideRegion ( String )</td>
            <td></td>
            <td>隐藏regoin对象。</td>
            <td></td>
        </tr>
        <tr>
            <td>isExpandRegion ( String )</td>
            <td></td>
            <td>是否展开region。</td>
            <td></td>
        </tr>
        <tr>
            <td>isVisibleRegion ( String )</td>
            <td></td>
            <td>是否显示region。</td>
            <td></td>
        </tr>
        <tr>
            <td>getRegion ( String )</td>
            <td>north/south/west/east/center</td>
            <td>获取<a href="#region">Regoin</a>对象。</td>
            <td></td>
        </tr>                
        <tr>
            <td>getRegionBodyEl ( String )</td>
            <td></td>
            <td>获取region面板对象内容区DOM元素</td>
            <td></td>
        </tr>
        
    </table>

    <h4>Events</h4>
    <table>
        <tr><th>Name</th><th>EventObject</th><th>Description</th></tr>
        <tr>
            <td>beforecollapse</td>
            <td>
<pre>
e : {
    sender: Object, 
    region: Object,
    cancel: false
}
</pre>
            </td>
            <td>折叠面板前发生</td>
        </tr>
        <tr>
            <td>beforeexpand</td>
            <td>
<pre>
e : {
    sender: Object, 
    region: Object,
    cancel: false
}
</pre>
            </td>
            <td>展开面板前发生</td>
        </tr>
        <tr>
            <td>collapse</td>
            <td>
<pre>
e : {
    sender: Object, 
    region: Object
}
</pre>
            </td>
            <td>折叠面板时发生</td>
        </tr>
        <tr>
            <td>expand</td>
            <td>
<pre>
e : {
    sender: Object, 
    region: Object
}
</pre>
            </td>
            <td>展开面板时发生</td>
        </tr>
        
    </table>

    <h4 id="region">Region Object</h4>
    <p>Layout 面板对象，属性如下：</p>
    <table>
        <tr><th>Name</th><th>Type</th><th>Description</th><th>Default</th></tr>
        <tr>
            <td>region</td>
            <td>String</td>
            <td>面板名称</td>
            <td></td>
            
        </tr>
        <tr>
            <td>title</td>
            <td>String</td>
            <td>标题文本</td>
            <td></td>
            
        </tr>
        <tr>
            <td>iconCls</td>
            <td>String</td>
            <td>标题图标样式类</td>
            <td></td>
            
        </tr>
        <tr>
            <td>iconStyle</td>
            <td>String</td>
            <td>标题图标样式</td>
            <td></td>
            
        </tr>
        <tr>
            <td>cls</td>
            <td>String</td>
            <td>样式类</td>
            <td></td>
            
        </tr>
        <tr>
            <td>style</td>
            <td>String</td>
            <td>样式</td>
            <td></td>
            
        </tr>
        <tr>
            <td>headerCls</td>
            <td>String</td>
            <td>头部样式类</td>
            <td></td>
            
        </tr>
        <tr>
            <td>headerStyle</td>
            <td>String</td>
            <td>头部样式</td>
            <td></td>
            
        </tr>
        <tr>
            <td>bodyCls</td>
            <td>String</td>
            <td>内容区样式类</td>
            <td></td>
            
        </tr>
        <tr>
            <td>bodyStyle</td>
            <td>String</td>
            <td>内容区样式</td>
            <td></td>
            
        </tr>
        <tr>
            <td>visible</td>
            <td>Boolean</td>
            <td>是否显示</td>
            <td>true</td>
            
        </tr>
        <tr>
            <td>expanded</td>
            <td>Boolean</td>
            <td>是否展开</td>
            <td>true</td>
            
        </tr>
        <tr>
            <td>showCollapseButton</td>
            <td>Boolean</td>
            <td>是否显示折叠按钮</td>
            <td>true</td>
            
        </tr>
        <tr>
            <td>showCloseButton</td>
            <td>Boolean</td>
            <td>是否显示关闭按钮</td>
            <td>true</td>
            
        </tr>

        <tr>
            <td>showSplit</td>
            <td>Boolean</td>
            <td>是否显示分割条</td>
            <td>true</td>
            
        </tr>

        <tr>
            <td>showSplitIcon</td>
            <td>Boolean</td>
            <td>是否显示分割条按钮</td>
            <td>true</td>
            
        </tr>

        
        <tr>
            <td>showHeader</td>
            <td>Boolean</td>
            <td>是否显示头部</td>
            <td>true</td>
            
        </tr>
        <tr>
            <td>showProxy</td>
            <td>Boolean</td>
            <td>是否折叠代理元素</td>
            <td>true</td>
            
        </tr>
        <tr>
            <td>showProxyText</td>
            <td>Boolean</td>
            <td>是否折叠代理文本</td>
            <td>false</td>
            
        </tr>
        
        
        <tr>
            <td>allowResize</td>
            <td>Boolean</td>
            <td>是否允许拖拽调节</td>
            <td>true</td>
            
        </tr>
        <tr>
            <td>splitSize</td>
            <td>Number</td>
            <td>分隔条尺寸</td>
            <td>6</td>
            
        </tr>
        
        <tr>
            <td>width</td>
            <td>Number</td>
            <td>宽度</td>
            <td></td>
            
        </tr>
        <tr>
            <td>height</td>
            <td>Number</td>
            <td>高度</td>
            <td></td>
            
        </tr>
        <tr>
            <td>minWidth</td>
            <td>Number</td>
            <td>最小宽度</td>
            <td></td>
            
        </tr>
        <tr>
            <td>minHeight</td>
            <td>Number</td>
            <td>最小高度</td>
            <td></td>
            
        </tr>
        <tr>
            <td>maxWidth</td>
            <td>Number</td>
            <td>最大宽度</td>
            <td></td>
            
        </tr>
        <tr>
            <td>maxHeight</td>
            <td>Number</td>
            <td>最大高度</td>
            <td></td>
            
        </tr>        
    </table>
</body>
</html>